<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<form>
    用户名<input name="username" id="username"><span id="errorMsg"></span>
    <br>
    密码<input name="password" type="password">
    <br>
    <input type="submit" value="注册">
</form>

<script>
    $(function () {
        $('#errorMsg').slideUp();
        $('#username').blur(function () {
            // 失去焦点
            var username = $('#username').val();
            // alert(username)
            // 把username通过ajax 发送到后端
            // 检查用户名是否存在
            $.ajax('/uu', {
                type: "POST",
                dataType: "json",
                data: {
                    method: 'checkUsername',
                    username: username
                }
                , success: function (result) {
                    if (result.exist) {
                        $('#errorMsg').text("用户名已存在(" + username + ")").slideDown();
                    } else {
                        $('#errorMsg').slideUp()
                    }
                }
            })
        })
    })
</script>

</body>
</html>